<template>
    <ul class="list">
        <li v-for="item in letters" :key="item" 
         :ref="item"
         @click="handleClick"
         @touchstart.prevent="handleStart"
         @touchmove="handleMove"
         @touchend="handleEnd"
        >{{item}}</li>
    </ul>
</template>

<script>

    export default {
        props:{
            cities:Object
        },
        data() {
            return {
                // 点击状态
                touchStatus:false,
                // 字母离顶端的距离
                startY:0,
                // 作为数据节流
                timer:null
            }
        },
        methods: {
            // 传递数据到City→List
            handleClick(e){
                this.$emit('handleChange',e.target.innerText)
            },
            /* 逻辑：
                计算出A字母离顶部框的高度；
                滑动时手指点击处距离顶部的高度；
                做出差值，计算当前点击字母高度减去A字母的高度（每个字母高度可以得知为20）；
                得到该字母的index，做出反应；
            */
            handleStart(){
                this.touchStatus=true
            },
            handleMove(e){
                if(this.touchStatus){
                    // 通过函数节流减少handleMove执行的频率，提高性能
                    if(this.timer){
                        clearTimeout(this.timer)
                    }
                    this.timer=setTimeout(()=>{
                        // A距离上部框的高度
                        // let startY=this.$refs['A'][0].offsetTop
                        // 当前移动处距离顶部的高度，79为框的高度
                        let touchY=e.touches[0].clientY - 79
                        // 每个字母高度为20，此处得到该字母的下标
                        let index=Math.floor((touchY-this.startY) / 20)
                        if(index>=0 && index<this.letters.length){
                            this.$emit('handleChange',this.letters[index])
                        }
                        console.log(index)
                    },16)
                    
                }
            },
            handleEnd(){
                this.touchStatus=false
            },
        },
        updated() { //数据更新时
            // 当父组件传过来数据时，子组件数据就会发生改变该函数被执行，就会进行计算
             this.startY=this.$refs['A'][0].offsetTop
        },
        computed: {
            letters(){
                let letters=[]
                for(let i in this.cities){
                    letters.push(i)
                }
                return letters  // 此时letters已为一个数组 ['A','B','C'……]，能用this.letters获取到
            }
        },
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/global.styl'
.list
    display flex
    flex-direction column
    justify-content center
    align-items center
    position absolute
    top 1.58rem
    right 0
    bottom 0
    width .4rem
    li
        line-height .4rem
        color $bgColor
</style>